<script lang='ts' setup>
import { ref } from 'vue';
import { DeleteOutlined, PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue';
import { TabsProps } from 'ant-design-vue/es/tabs';
const tabPosition = ref<TabsProps['tabPosition']>('top');
const activeKey = ref('1');

const backendDomains = ref<{ value: string }[]>([{ value: "" }]);
const chargeDomains = ref<{ value: string }[]>([{ value: "" }]);
const statisticsDomains = ref<{ value: string }[]>([{ value: "" }]);
const proxyArr = ref<{ value: string }[]>([{ value: "" }]);
const ApiArr = ref<{ value: string }[]>([{ value: "" }]);
const num = ref<number>(1);

const addDomain = (domains: { value: string }[]) => {
    domains.push({
        value: '',
    });
};


</script>
<template>
    <div class="mt-5 overflow-hidden">

        <h3 class="font-bold">
            服务信息
        </h3>

        <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition" animated>
            <a-tab-pane key="1" tab="后台域名">
                <div class="flex flex-col">
                    <a-form-item v-for="(domain, index) in backendDomains" :key="index">
                        <div class="flex">
                            <a-input v-model:value="domain.value" placeholder="请输入域名" />
                            <a-button class="flex jusittify-center items-center absolute right-0" type="danger"
                                @click="backendDomains.splice(index, 1)">
                                <DeleteOutlined />
                            </a-button>
                        </div>
                    </a-form-item>
                    <a-form-item class="flex">
                        <div class="flex items-center">
                            <a-button type="dashed" block @click="addDomain(backendDomains)"
                                class="flex items-center justify-center">
                                <PlusOutlined />
                                添加后台域名
                                <a-popover placement="topLeft">
                                    <template #content>
                                        <p>每增加一个后台域名需要额外支付100元</p>
                                    </template>
                                    <template #title>
                                        <span>提示</span>
                                    </template>
                                    <ExclamationCircleFilled />
                                </a-popover>
                            </a-button>
                            <span class="ml-5 text-red-600 font-bold">
                                ￥{{ 100 * backendDomains.length }}
                            </span>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="充值域名">
                <div class="flex flex-col">
                    <a-form-item v-for="(domain, index) in chargeDomains" :key="index">
                        <div class="flex">
                            <a-input v-model:value="domain.value" placeholder="请输入域名" />
                            <a-button class="flex jusittify-center items-center absolute right-0" type="danger"
                                @click="chargeDomains.splice(index, 1)">
                                <DeleteOutlined />
                            </a-button>
                        </div>
                    </a-form-item>
                    <a-form-item class="flex">
                        <div class="flex items-center">
                            <a-button type="dashed" block @click="addDomain(chargeDomains)"
                                class="flex items-center justify-center">
                                <PlusOutlined />
                                添加充值域名
                                <a-popover placement="topLeft">
                                    <template #content>
                                        <p>每增加一个充值域名需要额外支付100元</p>
                                    </template>
                                    <template #title>
                                        <span>提示</span>
                                    </template>
                                    <ExclamationCircleFilled />
                                </a-popover>
                            </a-button>
                            <span class="ml-5 text-red-600 font-bold">
                                ￥{{ 100 * chargeDomains.length }}
                            </span>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="统计域名">
                <div class="flex flex-col ">
                    <a-form-item v-for="(domain, index) in statisticsDomains" :key="index">
                        <div class="flex">
                            <a-input v-model:value="domain.value" placeholder="请输入域名" />
                            <a-button class="flex jusittify-center items-center absolute right-0" type="danger"
                                @click="statisticsDomains.splice(index, 1)">
                                <DeleteOutlined />
                            </a-button>
                        </div>
                    </a-form-item>
                    <a-form-item class="flex">
                        <div class="flex items-center">
                            <a-button type="dashed" block @click="addDomain(statisticsDomains)"
                                class="flex items-center justify-center">
                                <PlusOutlined />
                                添加统计域名
                                <a-popover placement="topLeft">
                                    <template #content>
                                        <p>每增加一个统计域名需要额外支付100元</p>
                                    </template>
                                    <template #title>
                                        <span>提示</span>
                                    </template>
                                    <ExclamationCircleFilled />
                                </a-popover>
                            </a-button>
                            <span class="ml-5 text-red-600 font-bold">
                                ￥{{ 100 * statisticsDomains.length }}
                            </span>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="API">
                <div class="flex flex-col ">
                    <a-form-item v-for="(domain, index) in ApiArr" :key="index">
                        <div class="flex">
                            <a-input v-model:value="domain.value" placeholder="请输入API" />
                            <a-button class="flex jusittify-center items-center absolute right-0" type="danger"
                                @click="ApiArr.splice(index, 1)">
                                <DeleteOutlined />
                            </a-button>
                        </div>
                    </a-form-item>
                    <a-form-item class="flex">
                        <div class="flex items-center">
                            <a-button type="dashed" block @click="addDomain(ApiArr)"
                                class="flex items-center justify-center">
                                <PlusOutlined />
                                添加API
                                <a-popover placement="topLeft">
                                    <template #content>
                                        <p>每增加一个代理需要额外支付100元</p>
                                    </template>
                                    <template #title>
                                        <span>提示</span>
                                    </template>
                                    <ExclamationCircleFilled />
                                </a-popover>
                            </a-button>
                            <span class="ml-5 text-red-600 font-bold">
                                ￥{{ 100 * ApiArr.length }}
                            </span>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>

            <a-tab-pane key="5" tab="代理">
                <div class="flex flex-col ">
                    <a-form-item v-for="(domain, index) in proxyArr" :key="index">
                        <div class="flex">
                            <a-input v-model:value="domain.value" placeholder="请输入代理" />
                            <a-button class="flex jusittify-center items-center absolute right-0" type="danger"
                                @click="proxyArr.splice(index, 1)">
                                <DeleteOutlined />
                            </a-button>
                        </div>
                    </a-form-item>
                    <a-form-item class="flex">
                        <div class="flex items-center">
                            <a-button type="dashed" block @click="addDomain(proxyArr)"
                                class="flex items-center justify-center">
                                <PlusOutlined />
                                添加代理
                                <a-popover placement="topLeft">
                                    <template #content>
                                        <p>每增加一个代理需要额外支付100元</p>
                                    </template>
                                    <template #title>
                                        <span>提示</span>
                                    </template>
                                    <ExclamationCircleFilled />
                                </a-popover>
                            </a-button>
                            <span class="ml-5 text-red-600 font-bold">
                                ￥{{ 100 * proxyArr.length }}
                            </span>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>
            <a-tab-pane key="6" tab="下发服务">
                <div class="flex flex-col ">
                    <a-form-item class="flex">
                        <div class="flex items-center">

                            <el-input-number v-model="num" :min="1" :max="100" />
                            <span class="mx-5 text-red-600 font-bold">
                                ￥{{ 100 * num }}
                            </span>
                            <a-popover placement="topLeft">
                                <template #content>
                                    <p>每增加一个分发节点需要额外支付100元</p>
                                </template>
                                <template #title>
                                    <span>提示</span>
                                </template>
                                <ExclamationCircleFilled />
                            </a-popover>
                        </div>
                    </a-form-item>
                </div>
            </a-tab-pane>

        </a-tabs>
    </div>

</template>
<style lang='scss' scoped></style>